<template>
    <div>
        <img style="display: block;width: 50%;margin: 0 auto" src="../../assets/images/company.jpg" />
        <div id="mychart"></div>
    </div>
</template>
<script>
import echarts from 'echarts';
import macarons from 'echarts/theme/macarons.js'
export default {
    name: 'business',
    methods: {
        setNodeData(arr, m, n ,listdata) {
            var size = 33;
            for(var i=0; i<arr.length; i++){
                listdata.push({
                    id : m++,
                    category: n,
                    name: arr[i],
                    symbolSize: size,
                    draggable: "true"
                });
            }
        },
                
        setLinkData(sourceList, m, links) {
            for(var i=0; i<sourceList.length; i++){
                links.push({
                    "source": sourceList[i],
                    "target": m,
                    lineStyle: {
                        normal: {
                            color: 'source',
                        }
                    }
                })
            }
        },
        creatLine() {
            var myGraphData = [
                    { "parentNode":"张三", "childNodes":["小明", "小华", "小杰", "小婷","小妍","小飞"]},
                    { "parentNode":"小明", "childNodes":[ "小王", "小赵", "小钱" ] },
                    { "parentNode":"小华", "childNodes":[ "小孙", "小李", "小周" ] },
                    { "parentNode":"小杰", "childNodes":[ "小吴", "小郑" ] },
                    { "parentNode":"小婷", "childNodes":[ "小谢", "小潘" ] },
                    { "parentNode":"小妍", "childNodes":[ "小苏", "小陈" ] },
                    { "parentNode":"小飞", "childNodes":[ "小郭", "小彭" ] }
                    
                ];
                    
           

            var listdata = [];
            var linksdata = [];     

            var nodeData = myGraphData;
            var m = 0;
            var source = [];
            for(var i=1; i < nodeData.length; i++){
                var node = nodeData[i].parentNode;
                var tx = [node];
                this.setNodeData( tx, m, 1, listdata);
                source.push(m);

                var Data = nodeData[i].childNodes;
                this.setNodeData( Data, m+1, 2, listdata);

                var sourceList = [];
                for(var n = m+1; n < m + Data.length + 1; n++){
                    sourceList.push(n);
                }
                this.setLinkData( sourceList, m, linksdata);
                m = m + Data.length + 1;
            }
                    
            var tx7 = [];
            tx7.push(nodeData[0].parentNode);
            this.setNodeData(tx7, m, 0, listdata);
            this.setLinkData(source, m, linksdata);

            let option = {
                title: {
                    text: "企业关联图",
                    top: "top",
                    left: "left",
                    textStyle: {
                        color: '#292421'
                    }
                },
                tooltip: {
                    formatter: '{b}'
                },
                backgroundColor: '#FFFFFF',
                legend: {
                    show : true,
                    data : [ {
                        name : '总公司',             
                        icon : 'rect'
                    },
                    {
                        name : '层级二',             
                        icon : 'roundRect'
                    }, {
                        name : '层级三',              
                        icon : 'circle'
                    } ],
                    textStyle: {
                        color: '#292421'
                    },
                    icon: 'circle',
                    type: 'scroll',
                    orient: 'horizontal',
                    left: 10,
                    top: 20,
                    bottom: 20,
                    itemWidth: 10,
                    itemHeight: 10
                },
                animationDuration: 0,
                animationEasingUpdate: 'quinticInOut',
                series: [{
                    name: '企业关联图',
                    type: 'graph',
                    layout: 'force',
                    force: {
                        repulsion: 300,
                        gravity: 0.1,
                        edgeLength: 15,
                        layoutAnimation: true,
                    },
                    data: listdata,
                    links: linksdata,
                    categories:[ 
                        {
                            name : '总公司',
                            symbol : 'rect',
                            label : {
                            }
                        }, {
                            name : '层级二',
                            symbol : 'rect'
                        }, {
                            name : '层级三',
                            symbol : 'roundRect'
                        }],
                    roam: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'bottom',
                            formatter: '{b}',
                            fontSize: 10,
                            fontStyle: '600',
                        }
                    },
                    lineStyle: {
                        normal: {
                            opacity: 0.9,
                            width: 1.5,
                            curveness: 0
                        }
                    }
                }]
            };
        let mycahrt = echarts.init(document.getElementById('mychart'), 'macarons')
        mycahrt.setOption(option)
        }
    },
    mounted() {
        this.creatLine()
    }
}
</script>
<style lang="scss">
#mychart {
    width: 100%;
    height: 700px
}
</style>
